<template>
  <!-- 首页排行榜页面 -->
  <div class="list">
    <div class="list-wrap">
      <div class="list-left">
        <div class="top">
          <div class="list-name">云音乐特色榜</div>
          <ul>
            <li class="active">
              <div class="img">
                <img src="./img/1.jpg" alt="飙升榜">
              </div>
              <div class="info">
                <p>飙升榜</p>
                <p>刚刚更新</p>
              </div>
            </li>
            <li>
              <div class="img">
                <img src="./img/1.jpg" alt="飙升榜">
              </div>
              <div class="info">
                <p>飙升榜</p>
                <p>刚刚更新</p>
              </div>
            </li>
            <li>
              <div class="img">
                <img src="./img/1.jpg" alt="飙升榜">
              </div>
              <div class="info">
                <p>飙升榜</p>
                <p>刚刚更新</p>
              </div>
            </li>
          </ul>
        </div>
        <div class="btm">
          <div class="list-name">全球媒体榜</div>
          <ul>
            <li class="active">
              <div class="img">
                <img src="./img/1.jpg" alt="飙升榜">
              </div>
              <div class="info">
                <p>飙升榜</p>
                <p>刚刚更新</p>
              </div>
            </li>
            <li>
              <div class="img">
                <img src="./img/1.jpg" alt="飙升榜">
              </div>
              <div class="info">
                <p>飙升榜</p>
                <p>刚刚更新</p>
              </div>
            </li>
            <li>
              <div class="img">
                <img src="./img/1.jpg" alt="飙升榜">
              </div>
              <div class="info">
                <p>飙升榜</p>
                <p>刚刚更新</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="list-right">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    name:'list'
}
</script>

<style scoped lang="scss">
  .list{
    width: 100%;
    background-color: #f5f5f5;
    .list-wrap{
      width: 980px;
      box-sizing: border-box;
      margin: 0 auto;
      display: flex;
      .list-left{
        width: 239px;
        background-color: #f9f9f9;
        border-left: 1px solid #d3d3d3;
        .top,.btm{
          width: 100%;
          .list-name{
            font-size: 14px;
            line-height: 20px;
            padding-left: 15px;
            box-sizing: border-box;
            margin: 40px 0 10px 0;
            font-weight: bold;
          }
          li{
            width: 100%;
            height: 62px;
            padding: 5px 20px;
            box-sizing: border-box;
            cursor: pointer;
            display: flex;
            &.active{
              background-color: #e6e6e6;
            }
            .img{
              width: 40px;
              height: 40px;
              margin-top: 6px;
              img{
                width: 100%;
                height: 100%;
              }
            }
            .info{
              width: 158px;
              padding: 0 10px;
              box-sizing: border-box;
              font-size: 12px;
              line-height: 20px;
              margin-top: 6px;
              p:nth-child(2){
                color: #999;
              }
            }
          }
        }
      }
      .list-right{
        width: 738px;
        background-color: #ffffff;
        border-left: 1px solid #d3d3d3;
        border-right: 1px solid #d3d3d3;
      }
    }
  }
</style>